import React from 'react';
import { DatePicker as AntdDatePicker } from 'antd';
import type { DatePickerProps as AntdDatePickerProps } from 'antd';
import { createStyles } from 'antd-style';

export interface DatePickerProps extends AntdDatePickerProps {
  /**
   * @description 自定义样式类名
   */
  customClassName?: string;
  /**
   * @description 支持多选模式
   */
  multiple?: boolean;
  /**
   * @description 多选模式下的值
   */
  value?: any;
  /**
   * @description 多选模式下的默认值
   */
  defaultValue?: any;
  /**
   * @description 多选模式下的变化回调
   */
  onChange?: (date: any, dateString: string | string[]) => void;
}

const useStyles = createStyles(({ token, css }) => ({
  datePicker: css`
    width: 100%;
  `,
}));

const DatePickerComponent: React.FC<DatePickerProps> = ({ customClassName, className, ...restProps }) => {
  const { styles, cx } = useStyles();
  
  const datePickerClassName = cx(
    className,
    customClassName,
    styles.datePicker
  );

  return <AntdDatePicker className={datePickerClassName} {...restProps as any} />;
};

const DatePicker = Object.assign(DatePickerComponent, {
  RangePicker: AntdDatePicker.RangePicker,
  _InternalPanelDoNotUseOrYouWillBeFired: AntdDatePicker._InternalPanelDoNotUseOrYouWillBeFired,
});

export { DatePicker };
export default DatePicker;

